<template>
  <div>
    <el-table
      :data="tableDataGetters"
      :row-class-name="tableRowClassName"
      border>
      <el-table-column type="expand" v-if="expandTableTitle.length">
        <template slot-scope="props">
          <el-form label-position="left">
            <el-form-item v-for="(title,index) in currentExpandTableTitle" :key="index" :label="title.label">
              <span>:{{ props.row[`${title.prop}`] }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        v-for="(title,index) in currentTableTitle"
        :key="index"
        :fixed="title.fixed"
        :prop="title.prop"
        :label="title.label"
        :width="title.width">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click.native.prevent="updateRow(scope.$index, tableDataGetters)" type="primary" plain>更新
          </el-button>
          <el-button @click.native.prevent="deleteRow(scope.$index, tableDataGetters)" type="danger" plain>删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-if="showPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page="currentPageGetters" :page-sizes="[5,25, 50, 100]" :page-size="pageSizeGetters"
                   layout="total, sizes, prev, pager, next, jumper" :total="totalGetters">
    </el-pagination>
  </div>
</template>

<script>
    import {mapGetters, mapMutations} from 'vuex'
    import {FIRST_PAGE, COOKIE_LIST} from '@/util/constant'
    import {get, cloneDeep} from 'lodash'
    import Cookie from 'js-cookie'

    export default {
        name: 'cement-table',
        props: {
            tableTitle: {
                type: Array,
                required: true
            },
            expandTableTitle: {
                type: Array,
                default: function () {
                    return []
                }
            },
            showPage: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                currentPage: 1,
                currentTableTitle: [],
                currentExpandTableTitle: [],
                unit: {}
            }
        },
        methods: {
            ...mapMutations([
                'changePageSize',
                'changeCurrentPage',
                'changeUpdateModel',
                'openDialog'
            ]),
            deleteRow(index, data) {
                this.$emit('deleteRow', data[index])
                this.handleCurrentChange(FIRST_PAGE)
            },
            updateRow(index, data) {
                this.changeUpdateModel(data[index])
                this.openDialog()
            },
            handleSizeChange(val) {
                this.changePageSize(val)
                this.getData()
            },
            handleCurrentChange(val) {
                this.changeCurrentPage(val)
                this.getData()
            },
            getData() {
                this.$emit('getData')
            },
            tableRowClassName({row}) {
                let isError = get(row, 'isError', false)
                if (isError) {
                    return 'error-row'
                }
                return ''
            },
            initTitle(tableTitle) {
                tableTitle.forEach((title) => {
                    if (get(title, 'unit')) {
                        title['label'] = title['label'] + '(' + this.unit[title.unit] + ')'
                    }
                })
            }
        },
        computed: {
            ...mapGetters([
                'pageSizeGetters',
                'currentPageGetters',
                'tableDataGetters',
                'totalGetters'
            ])
        },
        mounted() {
            this.unit = JSON.parse(Cookie.get(COOKIE_LIST.UNIT))
            this.currentTableTitle = cloneDeep(this.tableTitle)
            this.currentExpandTableTitle = cloneDeep(this.expandTableTitle)
            this.initTitle(this.currentTableTitle)
            this.initTitle(this.currentExpandTableTitle)
        }
    }
</script>
<style>
  .el-table .error-row {
    background: #F56C6C;
  }
</style>
